<template>
<div class="rx-form-bolist-edit-mobile">
    <div class="rx-form-bolist-mobile-container">
        <div class="rx-edit-mobile">
            <div class="rx-edit-mobile-roll rx-edit-mobile-roll-left">
                <div class="rx-edit-mobile-middle">
                    <div class="rx-iphone-header">
                        <span>{{i18n('list.listDesign','列表设计')}}</span>
                    </div>
                    <div class="rx-iphone-box" :style="iphoneStyle">
                        <div class="rx-edit-mobile-container">
                            <draggable
                                :list="selectList"
                                class="list-group"
                                :group="'gp'"
                                :handle="'.rx-card-item-center'"
                                @start="dragging = true"
                                @end="dragging = false"
                                :chosenClass="'list-group-item-select'"
                                :animation="400"
                                :forceFallback="true"
                                :fallbackClass="'list-group-item-show-down'"
                                :sort="true"
                            >
                                <transition-group>
                                    <template v-for="element of selectList">
                                        <div class="rx-card-item-center" v-if="element.templateType =='1'" :key="element.key">
                                            <div class="rx-card-item-imgbox" v-if="element.isShowImg">
                                                <my-icon style="font-size: 56px;color: #d5ddff;" :type="'iconimage-fill'"></my-icon>
                                            </div>
                                            <div class="rx-card-item-content">
                                                <ul class="item-list-top">
                                                    <li class="list-top-main">{{ element.mainShow }}</li>
                                                    <li class="list-top-less-main fontColor">{{element.lessMainShow}}</li>
                                                </ul>
                                                <ul class="item-list-center">
                                                    <li v-for="vice of element.viceShow">{{ vice }}</li>
                                                </ul>
                                                <ul class="item-list-bottom">
                                                    <li v-for="item of element.label">{{ item }}</li>
                                                </ul>
                                            </div>
                                        </div>
                                        <div class="rx-card-item-center" v-else-if="element.templateType =='2'" :key="element.key">
                                            <div class="rx-card-item-imgbox" v-if="element.isShowImg">
                                                <my-icon style="font-size: 56px;color: #d5ddff;" :type="'iconimage-fill'"></my-icon>
                                            </div>
                                            <div class="rx-card-item-content rx-card-item-content-right">
                                                <div class="state">{{ element.state }}</div>
                                                <ul class="item-list-top">
                                                    <li class="list-top-main">{{ element.mainShow }}：{{ element.mainShowValue }}</li>
                                                </ul>
                                                <ul class="item-list-bottom item-list-bottom-right">
                                                    <li v-for="item of element.label">{{ item }}</li>
                                                </ul>
                                                <ul class="item-list-center">
                                                    <li>{{ element.viceShowTitle }}：{{ element.viceShowTitleValue }}</li>
                                                </ul>
                                            </div>
                                        </div>
                                            <div v-else-if="element.templateType =='3' " :key="element.key">
                                                <table class="rx-card-item-table" style="margin-top: 20px">
                                                    <tr>
                                                        <th>{{i18n('list.headerField','表头字段')}}</th>
                                                        <th>{{i18n('list.headerField','表头字段')}}</th>
                                                        <th>{{i18n('list.headerField','表头字段')}}</th>
                                                    </tr>
                                                    <tr v-for="i in 3">
                                                        <td>{{i18n('list.fieldValue','字段值')}}</td>
                                                        <td>{{i18n('list.fieldValue','字段值')}}</td>
                                                        <td>{{i18n('list.fieldValue','字段值')}}</td>
                                                    </tr>
                                                </table>
                                            </div>
                                    </template>
                                </transition-group>
                            </draggable>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="rx-edit-toolbar">
            <div class="rx-edit-mobile-roll">
                <a-tabs default-active-key="1" :size="'small'" class="rx-tabs" style="height:100%;" @change="tabChange">
                    <a-tab-pane key="1" :tab="i18n('list.styleDisplay','风格显示')" forceRender>
                        <div class="rx-tab-pane">
                            <mobile-style ref="style" @activeChange="activeChange"></mobile-style>
                        </div>
                    </a-tab-pane>
                    <a-tab-pane v-if="isLeftTree=='YES'" key="2" :tab="i18n('list.navigationTree','导航树')">
                        <div class="rx-tab-pane">
                            <mobile-tree-tab ref="treeTab"></mobile-tree-tab>
                        </div>
                    </a-tab-pane>
                    <a-tab-pane key="3" :tab="i18n('list.mobileBtn','手机按钮')" forceRender>
                        <div class="rx-tab-pane">
                            <mobile-button ref="button" :pkId="pkId"></mobile-button>
                        </div>
                    </a-tab-pane>
                    <a-tab-pane key="4" :tab="i18n('list.searchSet','搜索设置')" forceRender>
                        <div class="rx-tab-pane">
                            <mobile-search ref="search"></mobile-search>
                        </div>
                    </a-tab-pane>
<!--                    <a-tab-pane key="5" :tab="i18n('list.queryView','查询视图')" forceRender>-->
<!--                        <div class="rx-tab-pane">-->
<!--                            <mobile-query-view ref="queryView"></mobile-query-view>-->
<!--                        </div>-->
<!--                    </a-tab-pane>-->
                    <a-tab-pane key="6" :tab="i18n('list.jsCustom','JS函数定义')" style="height:100%;">
                        <div class="rx-tab-pane" style="height:100%;">
                            <mobile-js-custom v-model:value="config.mobileJs" @updateMobileScript="updateMobileScript" ref="jsCustom"></mobile-js-custom>
                        </div>
                    </a-tab-pane>
                </a-tabs>
            </div>
        </div>
    </div>
</div>
</template>

<script>
import mobileImg from '@/views/modules/form/core/editmobile/img/iphoneX750.png'
import mobileStyle from "./editmobile/mobileStyle";
import mobileTreeTab from "./editmobile/mobileTreeTab";
import mobileButton from "./editmobile/mobileButton";
import mobileSearch from "./editmobile/mobileSearch";
import mobileQueryView from "./editmobile/mobileQueryView";
import mobileJsCustom from "./editmobile/mobileJsCustom";
import draggable from 'vuedraggable';
export default {
    name: "FormBoListEditMobile",
    props:["pkId"],
    components:{
        mobileStyle,
        mobileTreeTab,
        mobileButton,
        mobileSearch,
        mobileQueryView,
        mobileJsCustom,
        draggable
    },
    data(){
        return {
            isRoot:true,
            iphoneStyle:{
                backgroundImage:'url('+mobileImg+')',
            },
            ctlAry:["style","treeTab","button","search","jsCustom"],//'queryView'
            activeItem:1,
            defaultList:{
                1:[{
                    key:'1',
                    templateType:'1',//风格一
                    mainShow:'Java后台工程师',//主显示
                    lessMainShow:'10-15k',//次主显示
                    viceShow:['2年工作经验','本科','广州市'],//副显示
                    label:['MySql','ORacle','Maven构建','Linux命令'],//标签
                    isShowImg:false,//是否显示图标
                }, {
                    key:'1-1',
                    templateType:'1',//风格一
                    mainShow:'Java后台工程师',//主显示
                    lessMainShow:'10-15k',//次主显示
                    viceShow:['2年工作经验','本科','广州市'],//副显示
                    label:['MySql','ORacle','Maven构建'],//标签
                    isShowImg:true,//是否显示图标
                }],
                2:[{
                    key:'2',
                    templateType:'2',//风格二
                    mainShow:'申请人',//主显示字段标题
                    mainShowValue:'张三',//主显示值
                    state:'已验证',//状态值
                    viceShowTitle:'提交日期',//副显示标题
                    viceShowTitleValue:'2019-02-26',//副显示值
                    label:['主管','部门经理','研发部'],//标签值
                    isShowImg:false,//是否显示图标
                }, {
                    key:'2-1',
                    templateType:'2',//风格二
                    mainShow:'申请人',//主显示字段标题
                    mainShowValue:'张三',//主显示值
                    state:'已验证',//状态值
                    viceShowTitle:'提交日期',//副显示标题
                    viceShowTitleValue:'2019-02-26',//副显示值
                    label:['主管','部门经理','研发部'],//标签值
                    isShowImg:true,//是否显示图标
                }],
                3:[
                    {
                        key:'3',
                        templateType:'3',//风格三
                        th:this.i18n('list.headerField','表头字段'),
                        td:this.i18n('list.fieldValue','字段值'),
                    },{
                        key:'3',
                        templateType:'3',//风格三
                        th:this.i18n('list.headerField','表头字段'),
                        td:this.i18n('list.fieldValue','字段值'),
                    }
                ]
            },
            selectList:[],
            isLeftTree:'NO',
            config:{},
            vm:null
        }
    },
    methods:{
        i18n(name, text, key) {
            return this.$ti18(name, text, "formBoList", key);
        },
        setData(vm,data){
            var config={};
            if(data){
                config=JSON.parse(data);
            }
            this.vm=vm;
            this.config=config;
            this.isLeftTree=vm.isLeftTree;
            for(var i=0;i<this.ctlAry.length;i++){
                let tabKey=this.ctlAry[i];
                if(tabKey=='treeTab' || tabKey=='jsCustom'){
                    continue;
                }
                this.$refs[tabKey].setData(vm,config);
            }
        },
        getData(){
            var json={};
            for(var i=0;i<this.ctlAry.length;i++){
                let tabKey=this.ctlAry[i];
                if(!this.$refs[tabKey]){
                    if(tabKey=='treeTab'){
                        json={...json,...{mobileTreeTab:this.config.mobileTreeTab}};
                    }else if(tabKey=='jsCustom'){
                        json={...json,...{mobileJs:this.config.mobileJs}};
                    }
                    continue;
                }
                let data=this.$refs[tabKey].getData();
                if(!data.success){
                    return data;
                }
                json={...json,...data.data};
            }
            if(!json.mobileJs){
                json['mobileJs']= this.config.mobileJs
            }
            return {success:true,data:json};
        },
        activeChange(index){
            this.activeItem=index;
            this.selectList=this.defaultList[index];
        },
        tabChange(activeKey) {
            this.$nextTick(function () {
                if (activeKey == '2') {
                    this.$refs.treeTab.setData(this.vm, this.config);
                } else if (activeKey == '6') {
                    this.$refs.jsCustom.setData(this.vm, this.config);
                }
            })
        },
        updateMobileScript(val){
            debugger
            this.config.mobileJs = val
        }
    }
}
</script>

<style scoped>
.rx-card-item-table {
    width: 100%;
}
.rx-card-item-table tr{
    text-align: center;
}
.rx-card-item-table tr th{
    border: 1px solid #e5e5e5;
    height: 43px;
}
.rx-card-item-table tr td{
    height: 35px;
    border: 1px solid #e5e3e3;
}
.rx-form-bolist-edit-mobile-toolbar{
    padding: 10px;
    border-bottom: 1px solid #e6e8eb;
    text-align: right;
}
.rx-form-bolist-edit-mobile-toolbar button{
    margin-left: 6px;
}
.rx-form-bolist-mobile-container{
    flex: 1;
    display: flex;
}
.rx-form-bolist-edit-mobile{
    display: flex;
    height: 100%;
    width: 100%;
    flex-direction: column;
}
.rx-edit-mobile{
    flex: 3;
    position: relative;
    min-width: 406px;
}
.rx-edit-mobile-roll{
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    overflow: auto;
}
.rx-edit-mobile-roll-left{
    text-align: center;
}
.rx-edit-mobile-roll-left:before{
    content: '';
    display: inline-block;
    height: 100%;
    width: 0;
    vertical-align: middle;
}
.rx-edit-toolbar{
    max-width: 900px;
    width: 100%;
    border-left: 1px solid #e6e8eb;
    position: relative;
}
.rx-edit-mobile-middle{
    display: inline-block;
    position: relative;
    width: 378px;
    height: 750px;
    vertical-align: middle;
}
.rx-iphone-header{
    position: absolute;
    z-index: 1;
    left: 24px;
    right: 24px;
    height: 95px;
    border-top-left-radius: 40px;
    border-top-right-radius: 40px;
    background-color: #2e86ff;
    display: flex;
    justify-content: center;
    align-items: flex-end;
}
.rx-iphone-header>span{
    display: inline-block;
    font-size: 20px;
    padding-bottom: 10px;
    color: #fff;
}
.rx-iphone-box{
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    z-index: 3;
}
.rx-edit-mobile-container{
    position: absolute;
    top: 95px;
    left: 26px;
    right: 26px;
    bottom: 23px;
    overflow: auto;
    border-bottom-left-radius: 36px;
    border-bottom-right-radius: 36px;
    z-index: 5;
    text-align:left;
    background-color: #f0f2f5;
    padding:0 10px;
    box-sizing: border-box;
}
.rx-tabs >>> .ant-tabs-top-bar .ant-tabs-tab{
    margin-right: 20px;
    padding: 8px 2px;
}
.rx-tabs >>> .ant-tabs-top-bar{
    margin-bottom: 0;
}
.rx-tabs .rx-tab-pane{
    padding: 10px;
}


.rx-card-item-center{
    flex: 1;
    display: flex;
    background-color: #fff;
    border-radius: 10px;
    margin: 10px 0;
    cursor: move;
}
.rx-card-item-imgbox{
    padding:4px 0px 10px 8px;
}
.rx-card-item-content{
    flex: 1;
    padding:10px 10px 0 10px;
}
.fontColor{
    color: #2e86ff!important;
}

ul,li{
    padding: 0;
    margin: 0;
    list-style: none;
}
.item-list-top{
    display: flex;
    justify-content: space-between;
    padding-bottom: 14px;
}
.item-list-top .list-top-main{
    font-size: 16px;
    color: #333;
    font-weight: bold;
}
.list-top-less-main{
    font-size: 16px;
}
.item-list-center,
.item-list-bottom{
    display: flex;
    font-size: 12px;
    white-space: nowrap;
}
.item-list-bottom,
.item-list-center{
    padding-bottom: 10px;
}
.item-list-center li{
    position: relative;
    padding:0 6px;
    border-right: 1px solid transparent;
}
.item-list-center li:after{
    content: '';
    height: 12px;
    width: 1px;
    background-color: #e4e7eb;
    position: absolute;
    right: -1px;
    top: 3px;
}
.item-list-center li:first-child{
    padding-left: 0;
}
.item-list-center li:last-child{
    padding-right: 0;
}
.item-list-center li:last-child:after{
    content: '';
    display: none;
}
.item-list-bottom li{
    padding: 2px 6px;
    background-color: #f6f6f4;
    border-radius: 2px;
    margin-right: 5px;
}

.rx-card-item-content-right {
    position: relative;
}
.rx-card-item-content-right .state{
    padding:2px 10px;
    background-color: #87d068;
    border-radius: 0px 2px 0px 12px;
    top: 0;
    right: 0;
    position: absolute;
    color: #fff;
    font-size: 12px;
}


</style>